<template>
  <el-dialog v-model="openContrastDialog" :title="title" width="500px">
    <div class="header">
      <el-input v-model="input" placeholder="搜索" prefix-icon="Search" @input="doSearch" style="width: 300px;"
        clearable></el-input>
      <el-checkbox v-model="isChecked" @change="handleCheckAll">全选（{{ contrastItem.length }}）</el-checkbox>
    </div>
    <!-- <div class="center"> -->
    <el-scrollbar height="44vh">
      <div class="w-full">
        <CardGrid :item="filterItem" />
      </div>
    </el-scrollbar>

    <!-- </div> -->
    <div class="dialog-footer footer">
      <el-button @click="openContrastDialog = false">取消</el-button>
      <el-button type="primary" @click="confirm">确认</el-button>
    </div>
  </el-dialog>
</template>

<script>
import emitter from "@/utils/mitt-bus";
import { ElMessage } from 'element-plus';
import CardGrid from "./CardGrid.vue";

const contentDict = {
  'friend': {
    'title': '选中好友',
  },
  'group': {
    'title': '选中群聊',
  },
}

export default {
  data() {
    return {
      openContrastDialog: false,
      title: '',
      type: '',
      contrastItem: [],
      filterItem: [],
      input: '',
      isChecked: false,
    };
  },
  components: {
    CardGrid,
  },
  mounted() {
    emitter.on("openContrastDialog", ({ type, item }) => {
      this.openContrastDialog = true;
      this.type = type;
      this.title = contentDict[type]['title'];
      this.contrastItem = item;
      this.filterItem = item;
      this.input = ''
    });
  },
  methods: {
    confirm() {
      const selContrast = this.contrastItem.filter((row) => row.checked)
      selContrast.forEach((row) => {
        row.checked = false;
      });
      emitter.emit("onAddContrast", {
        type: this.type,
        contrast: selContrast
      })
      this.openContrastDialog = false
    },

    handleCheckAll(val) {
      this.contrastItem.forEach((row) => {
        row.checked = val;
      });
    },

    matchesFilter(item, searchStr) {
      return item.nickname.includes(searchStr) || item.remark.includes(searchStr)
    },

    doSearch(key) {
      if (key === '') {
        this.filterItem = this.contrastItem;
        return;
      }
      this.filterItem = this.filterItem.filter((item) => this.matchesFilter(item, key));
    },
  }
};
</script>
<style scoped>
.label {
  font-size: 12px;
  font-weight: bolder;
  margin: 0 10px;
}

.header {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.center {
  height: 330px;
}

.footer {
  box-sizing: border-box;
  padding-top: var(--el-dialog-padding-primary);
  text-align: right;
}
</style>